<template>
    <div class="page">
        <app-header>
            <a slot="left" href="javascript:;" class="go-back" @click="back"></a>
            <span slot="title">积分专享</span>
        </app-header>
        <swiper class="swiper-integral-container" :options="{pagination:'.swiper-pagination',bulletClass:'default-bullet',bulletActiveClass:'default-bullet-active',loop: true,autoplay: 0}">
            <!--slide-->
            <swiper-slide v-for="(item,index) in info.banner" :key="index" :style="{backgroundImage:'url('+item.image+')'}"></swiper-slide>
            <!--pagination-->
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
        <div class="jifen-warp flexbox">
            <a href="javascript:;">积分：0.0000</a>
            <a href="javascript:;">积分记录</a>
        </div>
        <div class="fefen-nav">
            <ul class="flexbox">
                <li class="icon1">
                    <span>积分兑券</span>
                </li>
                <li class="icon2">
                    <span>积分抽奖</span>
                </li>
                <li class="icon3">
                    <span>积分抵现</span>
                </li>
            </ul>
        </div>
        <div class="integral-list" v-for="(col,index) in info.alljfprouct" :key="index">
            <div class="integral-list-title flexbox items-center justify-center">
                <span class="icon icon-left"></span>
                <span v-text="col.title"></span>
                <span class="icon icon-right"></span>
            </div>
            <div class="integral-col">
                <div class="integral-col-title flexbox">
                    <span v-text="col.subTitle"></span>
                    <a href="javascript:;">更多</a>
                </div>
                <ul class="flexbox flex-wrap">
                    <li v-for="(item,index) in col.items" :key="index">
                        <router-link :to="{path:'/product/detail/',query:{proid:item.proid}}">
                            <img class="thumbs img-responsive row" :src="item.image_path">
                            <div class="product-info">
                                <h2 class="ellipsis" v-text="item.title"></h2>
                                <div class="jifen-price">
                                    <div class="flexbox justify-center" v-if="item.price[0]==0">
                                        <span>{{item.price[1]}} 积分</span>
                                    </div>
                                    <div class="flexbox items-center justify-center" v-else>
                                        <span>{{item.price[0] | Currency}}</span> + <img class="jf-icon" src="../../assets/images/jf_icon.png">
                                        <span>{{item.price[1]}}</span>
                                    </div>
                                </div>
                            </div>
                        </router-link>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
import mixin from "@/mixin";
import appHeader from "@/components/common/HeadBar";
export default {
  data() {
    return {
      info: []
    };
  },
  mixins: [mixin],
  components: {
    appHeader
  },
  methods: {
    load_intergral_data() {
      this.api.get_integral_index().then(response => {
        this.info = response.data;
      });
    }
  },
  created() {
    this.load_intergral_data();
  }
};
</script>
<style src="@/assets/scss/integral.scss" lang="scss"></style>